<template>
  <div class="scroll">
    <example-card title="网络请求" url="https://github.com/axios/axios">
      <div>
        在组件内使用<code> this.axios </code> 调用
        <ul>
          <li>axios(config)</li>
          <li>axios(url[, config])</li>
          <li>axios.request(config)</li>
          <li>axios.get(url[, config])</li>
          <li>axios.delete(url[, config])</li>
          <li>axios.head(url[, config])</li>
          <li>axios.options(url[, config])</li>
          <li>axios.post(url[, data[, config]])</li>
          <li>axios.put(url[, data[, config]])</li>
          <li>axios.patch(url[, data[, config]])</li>
        </ul>
        <blockquote>
          <h3>config 配置</h3>
          <pre>{
  <span class="pl-c"><span class="pl-c">//</span> `url` is the server URL that will be used for the request</span>
  url<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>/user<span class="pl-pds">'</span></span>,

  <span class="pl-c"><span class="pl-c">//</span> `method` is the request method to be used when making the request</span>
  method<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>get<span class="pl-pds">'</span></span>, <span class="pl-c"><span class="pl-c">//</span> default</span>

  <span class="pl-c"><span class="pl-c">//</span> `baseURL` will be prepended to `url` unless `url` is absolute.</span>
  <span class="pl-c"><span class="pl-c">//</span> It can be convenient to set `baseURL` for an instance of axios to pass relative URLs</span>
  <span class="pl-c"><span class="pl-c">//</span> to methods of that instance.</span>
  baseURL<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>https://some-domain.com/api/<span class="pl-pds">'</span></span>,

  <span class="pl-c"><span class="pl-c">//</span> `transformRequest` allows changes to the request data before it is sent to the server</span>
  <span class="pl-c"><span class="pl-c">//</span> This is only applicable for request methods 'PUT', 'POST', and 'PATCH'</span>
  <span class="pl-c"><span class="pl-c">//</span> The last function in the array must return a string or an instance of Buffer, ArrayBuffer,</span>
  <span class="pl-c"><span class="pl-c">//</span> FormData or Stream</span>
  <span class="pl-c"><span class="pl-c">//</span> You may modify the headers object.</span>
  transformRequest<span class="pl-k">:</span> [<span class="pl-k">function</span> (<span class="pl-smi">data</span>, <span class="pl-smi">headers</span>) {
    <span class="pl-c"><span class="pl-c">//</span> Do whatever you want to transform the data</span>

    <span class="pl-k">return</span> data;
  }],

  <span class="pl-c"><span class="pl-c">//</span> `transformResponse` allows changes to the response data to be made before</span>
  <span class="pl-c"><span class="pl-c">//</span> it is passed to then/catch</span>
  transformResponse<span class="pl-k">:</span> [<span class="pl-k">function</span> (<span class="pl-smi">data</span>) {
    <span class="pl-c"><span class="pl-c">//</span> Do whatever you want to transform the data</span>

    <span class="pl-k">return</span> data;
  }],

  <span class="pl-c"><span class="pl-c">//</span> `headers` are custom headers to be sent</span>
  headers<span class="pl-k">:</span> {<span class="pl-s"><span class="pl-pds">'</span>X-Requested-With<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>XMLHttpRequest<span class="pl-pds">'</span></span>},

  <span class="pl-c"><span class="pl-c">//</span> `params` are the URL parameters to be sent with the request</span>
  <span class="pl-c"><span class="pl-c">//</span> Must be a plain object or a URLSearchParams object</span>
  params<span class="pl-k">:</span> {
    <span class="pl-c1">ID</span><span class="pl-k">:</span> <span class="pl-c1">12345</span>
  },

  <span class="pl-c"><span class="pl-c">//</span> `paramsSerializer` is an optional function in charge of serializing `params`</span>
  <span class="pl-c"><span class="pl-c">//</span> (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)</span>
  <span class="pl-en">paramsSerializer</span><span class="pl-k">:</span> <span class="pl-k">function</span>(<span class="pl-smi">params</span>) {
    <span class="pl-k">return</span> <span class="pl-smi">Qs</span>.<span class="pl-c1">stringify</span>(params, {arrayFormat<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>brackets<span class="pl-pds">'</span></span>})
  },

  <span class="pl-c"><span class="pl-c">//</span> `data` is the data to be sent as the request body</span>
  <span class="pl-c"><span class="pl-c">//</span> Only applicable for request methods 'PUT', 'POST', and 'PATCH'</span>
  <span class="pl-c"><span class="pl-c">//</span> When no `transformRequest` is set, must be of one of the following types:</span>
  <span class="pl-c"><span class="pl-c">//</span> - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams</span>
  <span class="pl-c"><span class="pl-c">//</span> - Browser only: FormData, File, Blob</span>
  <span class="pl-c"><span class="pl-c">//</span> - Node only: Stream, Buffer</span>
  data<span class="pl-k">:</span> {
    firstName<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Fred<span class="pl-pds">'</span></span>
  },

  <span class="pl-c"><span class="pl-c">//</span> `timeout` specifies the number of milliseconds before the request times out.</span>
  <span class="pl-c"><span class="pl-c">//</span> If the request takes longer than `timeout`, the request will be aborted.</span>
  timeout<span class="pl-k">:</span> <span class="pl-c1">1000</span>,

  <span class="pl-c"><span class="pl-c">//</span> `withCredentials` indicates whether or not cross-site Access-Control requests</span>
  <span class="pl-c"><span class="pl-c">//</span> should be made using credentials</span>
  withCredentials<span class="pl-k">:</span> <span class="pl-c1">false</span>, <span class="pl-c"><span class="pl-c">//</span> default</span>

  <span class="pl-c"><span class="pl-c">//</span> `adapter` allows custom handling of requests which makes testing easier.</span>
  <span class="pl-c"><span class="pl-c">//</span> Return a promise and supply a valid response (see lib/adapters/README.md).</span>
  <span class="pl-en">adapter</span><span class="pl-k">:</span> <span class="pl-k">function</span> (<span class="pl-smi">config</span>) {
    <span class="pl-c"><span class="pl-c">/*</span> ... <span class="pl-c">*/</span></span>
  },

  <span class="pl-c"><span class="pl-c">//</span> `auth` indicates that HTTP Basic auth should be used, and supplies credentials.</span>
  <span class="pl-c"><span class="pl-c">//</span> This will set an `Authorization` header, overwriting any existing</span>
  <span class="pl-c"><span class="pl-c">//</span> `Authorization` custom headers you have set using `headers`.</span>
  auth<span class="pl-k">:</span> {
    username<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>janedoe<span class="pl-pds">'</span></span>,
    password<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>s00pers3cret<span class="pl-pds">'</span></span>
  },

  <span class="pl-c"><span class="pl-c">//</span> `responseType` indicates the type of data that the server will respond with</span>
  <span class="pl-c"><span class="pl-c">//</span> options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'</span>
  responseType<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>json<span class="pl-pds">'</span></span>, <span class="pl-c"><span class="pl-c">//</span> default</span>

  <span class="pl-c"><span class="pl-c">//</span> `responseEncoding` indicates encoding to use for decoding responses</span>
  <span class="pl-c"><span class="pl-c">//</span> Note: Ignored for `responseType` of 'stream' or client-side requests</span>
  responseEncoding<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>utf8<span class="pl-pds">'</span></span>, <span class="pl-c"><span class="pl-c">//</span> default</span>

  <span class="pl-c"><span class="pl-c">//</span> `xsrfCookieName` is the name of the cookie to use as a value for xsrf token</span>
  xsrfCookieName<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>XSRF-TOKEN<span class="pl-pds">'</span></span>, <span class="pl-c"><span class="pl-c">//</span> default</span>

  <span class="pl-c"><span class="pl-c">//</span> `xsrfHeaderName` is the name of the http header that carries the xsrf token value</span>
  xsrfHeaderName<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>X-XSRF-TOKEN<span class="pl-pds">'</span></span>, <span class="pl-c"><span class="pl-c">//</span> default</span>

  <span class="pl-c"><span class="pl-c">//</span> `onUploadProgress` allows handling of progress events for uploads</span>
  <span class="pl-en">onUploadProgress</span><span class="pl-k">:</span> <span class="pl-k">function</span> (<span class="pl-smi">progressEvent</span>) {
    <span class="pl-c"><span class="pl-c">//</span> Do whatever you want with the native progress event</span>
  },

  <span class="pl-c"><span class="pl-c">//</span> `onDownloadProgress` allows handling of progress events for downloads</span>
  <span class="pl-en">onDownloadProgress</span><span class="pl-k">:</span> <span class="pl-k">function</span> (<span class="pl-smi">progressEvent</span>) {
    <span class="pl-c"><span class="pl-c">//</span> Do whatever you want with the native progress event</span>
  },

  <span class="pl-c"><span class="pl-c">//</span> `maxContentLength` defines the max size of the http response content allowed</span>
  maxContentLength<span class="pl-k">:</span> <span class="pl-c1">2000</span>,

  <span class="pl-c"><span class="pl-c">//</span> `validateStatus` defines whether to resolve or reject the promise for a given</span>
  <span class="pl-c"><span class="pl-c">//</span> HTTP response status code. If `validateStatus` returns `true` (or is set to `null`</span>
  <span class="pl-c"><span class="pl-c">//</span> or `undefined`), the promise will be resolved; otherwise, the promise will be</span>
  <span class="pl-c"><span class="pl-c">//</span> rejected.</span>
  <span class="pl-en">validateStatus</span><span class="pl-k">:</span> <span class="pl-k">function</span> (<span class="pl-smi">status</span>) {
    <span class="pl-k">return</span> status <span class="pl-k">&gt;=</span> <span class="pl-c1">200</span> <span class="pl-k">&amp;&amp;</span> status <span class="pl-k">&lt;</span> <span class="pl-c1">300</span>; <span class="pl-c"><span class="pl-c">//</span> default</span>
  },

  <span class="pl-c"><span class="pl-c">//</span> `maxRedirects` defines the maximum number of redirects to follow in node.js.</span>
  <span class="pl-c"><span class="pl-c">//</span> If set to 0, no redirects will be followed.</span>
  maxRedirects<span class="pl-k">:</span> <span class="pl-c1">5</span>, <span class="pl-c"><span class="pl-c">//</span> default</span>

  <span class="pl-c"><span class="pl-c">//</span> `socketPath` defines a UNIX Socket to be used in node.js.</span>
  <span class="pl-c"><span class="pl-c">//</span> e.g. '/var/run/docker.sock' to send requests to the docker daemon.</span>
  <span class="pl-c"><span class="pl-c">//</span> Only either `socketPath` or `proxy` can be specified.</span>
  <span class="pl-c"><span class="pl-c">//</span> If both are specified, `socketPath` is used.</span>
  socketPath<span class="pl-k">:</span> <span class="pl-c1">null</span>, <span class="pl-c"><span class="pl-c">//</span> default</span>

  <span class="pl-c"><span class="pl-c">//</span> `httpAgent` and `httpsAgent` define a custom agent to be used when performing http</span>
  <span class="pl-c"><span class="pl-c">//</span> and https requests, respectively, in node.js. This allows options to be added like</span>
  <span class="pl-c"><span class="pl-c">//</span> `keepAlive` that are not enabled by default.</span>
  httpAgent<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-en">http.Agent</span>({ keepAlive<span class="pl-k">:</span> <span class="pl-c1">true</span> }),
  httpsAgent<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-en">https.Agent</span>({ keepAlive<span class="pl-k">:</span> <span class="pl-c1">true</span> }),

  <span class="pl-c"><span class="pl-c">//</span> 'proxy' defines the hostname and port of the proxy server</span>
  <span class="pl-c"><span class="pl-c">//</span> Use `false` to disable proxies, ignoring environment variables.</span>
  <span class="pl-c"><span class="pl-c">//</span> `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and</span>
  <span class="pl-c"><span class="pl-c">//</span> supplies credentials.</span>
  <span class="pl-c"><span class="pl-c">//</span> This will set an `Proxy-Authorization` header, overwriting any existing</span>
  <span class="pl-c"><span class="pl-c">//</span> `Proxy-Authorization` custom headers you have set using `headers`.</span>
  proxy<span class="pl-k">:</span> {
    host<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>127.0.0.1<span class="pl-pds">'</span></span>,
    port<span class="pl-k">:</span> <span class="pl-c1">9000</span>,
    auth<span class="pl-k">:</span> {
      username<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>mikeymike<span class="pl-pds">'</span></span>,
      password<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>rapunz3l<span class="pl-pds">'</span></span>
    }
  },

  <span class="pl-c"><span class="pl-c">//</span> `cancelToken` specifies a cancel token that can be used to cancel the request</span>
  <span class="pl-c"><span class="pl-c">//</span> (see Cancellation section below for details)</span>
  cancelToken<span class="pl-k">:</span> <span class="pl-k">new</span> <span class="pl-en">CancelToken</span>(<span class="pl-k">function</span> (<span class="pl-smi">cancel</span>) {
  })
}</pre>
        </blockquote>
      </div>
    </example-card>
  </div>
</template>

<script>
  export default {
    name: "other_axios_view"
  };
</script>

<style scoped>
  blockquote {
    padding: 0 1em;
    margin: 0 0 16px;
    color: #6a737d;
    border-left: 0.25em solid #dfe2e5;
  }
</style>
